import React from "react";
import {Button as AntdButton, Progress as AntProgress} from 'antd';
import {renderIcon, VJsonComponent, VJsonComponentBase} from "../factory";
import {NamePath} from "rc-field-form/lib/interface";
import _ from 'lodash'
import {YvanEvent} from "../types";
import {apply, isPromise, YvanEventBind, YvanEventDispatch} from "../utils/helper";
import * as Extend from '../extend'
import {toJS} from "mobx";

export interface ProgressVJsonProp {
    type?: "line" | "circle" | "dashboard";
    format?: (percent?:number, successPercent?:number) => string | string;
    percent?: number;
    showInfo?: boolean;
    status?: 'success' | 'exception' | 'normal' | 'active';
    strokeColor?: string;
    strokeLinecap?: 'round' | 'square';
    success?: { percent: number, strokeColor: string };
    trailColor?: string;
    steps?: number; //type="line"
    strokeWidth?: number;
    width?: number;

}

export interface ProgressState {

}

@VJsonComponent({
    view: 'progress'
})
export default class Progress extends VJsonComponentBase<ProgressVJsonProp, ProgressState> {
    static defaultProps = {
        type: 'circle'
    }

    constructor(props: any) {
        super(props);

        _.defaults(
            this.props.vjson,
            Progress.defaultProps
        )
    }

    set percent(value: number) {
        this.props.vjson.percent = value
    }

    get percent() {
        return this.props.vjson.percent!
    }

    render() {
        if (Extend.isDebugMode()) {
            console.log('RenderProgress', this.toString())
        }

        const progress = // @ts-ignore
            <AntProgress key={this.key} view_id={this.key} aria-roledescription={this.view}
                         percent={apply(this, this.props.vjson.percent)}
                         type={apply(this, this.props.vjson.type)}
                         status={apply(this, this.props.vjson.status)}
                         // format={apply(this, this.props.vjson.format)}
                         showInfo={apply(this, this.props.vjson.showInfo)}
                         strokeColor={apply(this, this.props.vjson.strokeColor)}
                         strokeLinecap={apply(this, this.props.vjson.strokeLinecap)}
                         strokeWidth={apply(this, this.props.vjson.strokeWidth)}
                         width={apply(this, this.props.vjson.width)}
                         steps={apply(this, this.props.vjson.steps)}
            />

        return progress
    }
}
